<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<img id="image" src=""/>
<br/>
<input type="file" onchange="selectImage(this);"/>
<br/>
<input type="button" onclick="uploadImage();" value="提交"/>
<script>
    var image = '';
    function selectImage(file) {
        if (!file.files || !file.files[0]) {
            return;
        }
        var reader = new FileReader();
        reader.onload = function (evt) {
            document.getElementById('image').src = evt.target.result;
            image = evt.target.result;
        };
        reader.readAsDataURL(file.files[0]);
    }
    function uploadImage() {
        image = JSON.stringify(image);
        $.ajax({

            type: 'POST',

            url: 'http://localhost:8081/fileUp',

            data: {
                base64: image
            },

            async: false,

            dataType: 'json',

            success: function (data) {
                alert(data.id+' '+data.data);
                $('#img').attr('src', 'http://localhost:8081/resource/img/'+data.data);
                $('#divPass').html(data.data);
            }
        });

    }
</script>
<div id="divPass"></div>
<img id="img" src="" height="200px" width="200px">
</body>
</html>
